<template>
  <a-card :bordered="false" style="margin-top: 24px" title="业务应用" class="ant-pro-components-tag-select">   
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      rowKey="app_id"
    >
    </a-table>
  </a-card>
</template>

<script>
import { sqlSelect, sqlFindOne } from '@/api/sql'

export default {
  name: 'CmdbAppList',

  components: {
  },

  data () {
    return {
      pagination: {
        page: 0, // 请求参数
        defaultPageSize: 10,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true, // 是否可以快速跳转至某页
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => this.$t('pagination.total') + ` ${total} ` + this.$t('pagination.items'), // 分页中显示总的数据
        total: 0 // 总条数
      },
      loading: false,

      columns: [
        {
          title: '业务编号',
          dataIndex: 'app_id',
          key: 'app_id'
        },
        {
          title: '业务名称',
          dataIndex: 'app_name',
          key: 'app_name'
        },
        {
          title: '业务简称',
          dataIndex: 'app_alias',
          key: 'app_alias'
        },
        {
          title: '重要等级',
          dataIndex: 'app_level',
          key: 'app_level'
        },
        {
          title: '支持厂商',
          dataIndex: 'isv_name',
          key: 'isv_name'
        }
      ],

      data: []
    }
  },

  mounted () {
    this.getData(this.pagination.page, this.pagination.pageSize)
  },

  methods: {
    /*
     * 切换分页，重新请求数据
     */
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.page = pagination.current - 1
      this.getData(this.pagination.page, this.pagination.pageSize)
    },

    /*
     * 获取数据
     */
    async getData (page, size) {
      this.data = await this.getList(page, size)
      this.pagination.total = await this.getTotal()
    },

    /*
     * 获取列表数据(PostgreSQL)
     */
    getList (page, size) {
      const params = {
        sql: `select * from cmdb.apps order by app_id asc offset ${page}*${size} limit ${size}`
      }
      return new Promise((resolve, reject) => {
        sqlSelect(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            reject(error)
          }
        )
      })
    },

    /**
     * 获取数据总数
     */
    getTotal () {
      const params = {
        sql: 'select count(*) as total from cmdb.apps'
      }
      return new Promise((resolve, reject) => {
        sqlFindOne(params).then(
          (res) => {
            resolve(res.total)
          },
          (error) => {
            reject(error)
          }
        )
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
